<script setup>
import { reactive, onBeforeMount, onMounted } from "vue";
import DiamondImg from "@/assets/Diamond.png";
import HeartImg from "@/assets/Heart.png";
import SpadeImg from "@/assets/Spade.png";
import ClubImg from "@/assets/Club.png";

const imgMap = {
  d: DiamondImg,
  h: HeartImg,
  s: SpadeImg,
  c: ClubImg,
};

const fromatCard = (index) => {
  const points = [
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "T",
    "J",
    "Q",
    "K",
    "A",
  ];
  const suits = ["方块", "红桃", "黑桃", "梅花"];
  const index1 = index % 13;
  const index2 = Math.trunc(index / 13);
  return {
    point: points[index1] || "",
    suit: suits[index2] || "",
  };
};
const cards = [];
for (let index = 0; index < 52; index++) {
  const { point, suit } = fromatCard(index);
  cards.push({
    point,
    img: imgMap[suit] || "",
  });
}
const colorMap = {
  1: "",
  2: "",
  3: "",
  4: "",
  5: "",
};
const texts1 = ["AA", "KK", "QQ", "AKs", "AKo"];
const texts2 = ["AQs", "KQs", "AJs", "AQo", "KQo", "JJ", "TT"];
const texts3 = [
  "ATs",
  "A9s",
  "A8s",
  "A7s",
  "A6s",
  "A5s",
  "A4s",
  "A3s",
  "A2s",
  "KJs",
  "KTs",
  "QJs",
  "Ajo",
  "AJo",
  "KJo",
  "QJo",
  "99",
  "88",
];
const texts4 = [
  "ATo",
  "A9o",
  "A8o",
  "A7o",
  "A6o",
  "A5o",
  "KTo",
  "QTo",
  "JTo",
  "QTs",
  "JTs",
  "K9s",
  "Q9s",
  "J9s",
  "T9s",
  "T8s",
  "98s",
  "87s",
  "76s",
  "65s",
  "77",
  "66",
  "55",
  "44",
  "33",
  "22",
];
const texts5 = [
  "K8s",
  "Q8s",
  "J8s",
  "T7s",
  "97s",
  "96s",
  "86s",
  "75s",
  "64s",
  "54s",
  "43s",
  "A4o",
  "A3o",
  "A2o",
  "K9o",
  "Q9o",
  "J9o",
  "T9o",
  "J8o",
  "T8o",
  "98o",
  "97o",
  "87o",
  "86o",
  "76o",
  "65o",
];
const tips = ["A", "K", "Q", "J", "T", "9", "8", "7", "6", "5", "4", "3", "2"];
const tipItems = [];
for (const [index, tip] of tips.entries()) {
  for (const [index1, tip1] of tips.entries()) {
    let text = "";
    if (index > index1) {
      text = "" + tip1 + tip + "o";
    } else if (index < index1) {
      text = "" + tip + tip1 + "s";
    } else {
      text = "" + tip + tip1;
    }
    if (texts1.includes(text)) {
      tipItems.push({
        text,
        color: "#b72220",
      });
    } else if (texts2.includes(text)) {
      tipItems.push({
        text,
        color: "#ed5543",
      });
    } else if (texts3.includes(text)) {
      tipItems.push({
        text,
        color: "#f08b81",
      });
    } else if (texts4.includes(text)) {
      tipItems.push({
        text,
        color: "#7af245",
      });
    } else if (texts5.includes(text)) {
      tipItems.push({
        text,
        color: "#fff75a",
      });
    } else {
      tipItems.push({
        text,
        color: "#4eb7f9",
      });
    }
  }
}
const info = reactive({
  position: 0,
  index: 0,
  pot: "",
  titles: [],
  cards: [],
  postions: [],
  stacks: [],
  userCards: [],
  users: [],
  delarClass: "button",
  winClass: "win",
});
let timer = null;
const handlePlay = () => {
  timer = setInterval(() => {
    if (info.index === info.items.length - 1) {
      clearInterval(timer);
      return;
    }
    info.index++;
    const data = info.items[info.index] || {};
    info.stacks = data.stacks;
    info.position = data.position;
    if (data.pot > 0) {
      info.pot = `POT: ${data.pot}`;
    }
    for (let index = 0; index < data.actions.length; index++) {
      const action = data.actions[index];
      info.postions[index].action = action;
    }
    if (data.cards.length > 0) {
      const cards = [];
      for (let index = 0; index < 5; index++) {
        const index1 = data.cards[index];
        const { point, suit } = fromatCard(index1);
        cards.push({
          point: point ? point : "",
          img: point ? imgMap[suit] : "",
        });
      }
      info.cards = cards;
    }
    info.winClass = "win" + info.index;
    info.delarClass = "button" + info.index;
  }, 2000);
};

const getInfo = () => {
  const styles = [
    {
      background: "#ff8184",
      borderColor: "#cf686c",
    },
    {
      background: "#f59d68",
      borderColor: "#d4885a",
    },
    {
      background: "#eecb5f",
      borderColor: "#daa301",
    },
    { background: "#5289ea", borderColor: "#2e75b6" },
  ];
  const positionsMap = {
    6: ["庄家", "小盲", "大盲", "枪口", "MP", "CO"],
    7: ["庄家", "小盲", "大盲", "枪口", "LJ", "HJ", "CO"],
    8: ["庄家", "小盲", "大盲", "枪口", "枪口1", "LJ", "HJ", "CO"],
    9: ["庄家", "小盲", "大盲", "枪口", "枪口1", "枪口2", "LJ", "HJ", "CO"],
  };
  const data = {
    title: "资格赛电子票X6争夺赛",
    num: "16",
    total: "66",
    level: "800/1600",
    rake: "200",
    users: [
      {
        name: "职业的托比",
        bankroll: "12345678",
        cards: [1, 2],
      },
      {
        name: "温柔的淑芬",
        bankroll: "12345678",
        cards: [1, 2],
      },
      {
        name: "狡猾的王二",
        bankroll: "12345678",
        cards: [1, 2],
      },
      {
        name: "难缠的方舟",
        bankroll: "12345678",
        cards: [1, 2],
      },
      {
        name: "老练的赵哥",
        bankroll: "12345678",
        cards: [1, 2],
      },
      {
        name: "漂亮的小美",
        bankroll: "12345678",
        cards: [1, 2],
      },
      {
        name: "弃牌的小曹",
        bankroll: "12345678",
        cards: [1, 2],
      },
      {
        name: "优秀的老宋",
        bankroll: "12345678",
        cards: [1, 2],
      },
      {
        name: "跟注的小勇",
        bankroll: "12345678",
        cards: [1, 2],
      },
    ],
    items: [
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 3,
        pot: 0,
        stacks: [0, 100, 200, 0, 0, 0, 0, 0, 0],
        cards: [],
      },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 4,
        pot: 0,
        stacks: [0, 100, 200, 200, 0, 0, 0, 0, 0],
        cards: [],
      },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "弃牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 5,
        pot: 0,
        stacks: [0, 100, 200, 200, 200, 0, 0, 0, 0],
        cards: [],
      },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "弃牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 6,
        pot: 0,
        stacks: [0, 100, 200, 200, 200, 200, 0, 0, 0],
        cards: [],
      },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "弃牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 7,
        pot: 0,
        stacks: [0, 100, 200, 200, 200, 200, 200, 0, 0],
        cards: [],
      },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 8,
        pot: 0,
        stacks: [0, 100, 200, 200, 200, 200, 200, 200, 0],
        cards: [],
      },
      // {
      //
      //   position: 9,
      //   pot: 0,
      //   stacks: [0, 100, 200, 200, 200, 200, 200, 200, 200],
      //   cards: [],
      // },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 0,
        pot: 0,
        stacks: [200, 100, 200, 200, 200, 200, 200, 200, 200],
        cards: [],
      },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 1,
        pot: 0,
        stacks: [200, 200, 200, 200, 200, 200, 200, 200, 200],
        cards: [],
      },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 2,
        pot: 0,
        stacks: [200, 200, 200, 200, 200, 200, 200, 200, 200],
        cards: [],
      },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 3,
        pot: 1800,
        stacks: [0, 0, 0, 0, 0, 0, 0, 0, 0],
        cards: [1, 2, 3],
      },
      // {
      //
      //   position: 3,
      //   pot: 1800,
      //   stacks: [0, 0, 0, 0, 0, 0, 0, 0, 0],
      //   cards: [1, 2, 3],
      // },
      // {
      //
      //   position: 3,
      //   pot: 1800,
      //   stacks: [0, 0, 0, 0, 0, 0, 0, 0, 0],
      //   cards: [1, 2, 3],
      // },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 4,
        pot: 1800,
        stacks: [0, 0, 0, 600, 0, 0, 0, 0, 0],
        cards: [1, 2, 3],
      },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 5,
        pot: 1800,
        stacks: [0, 0, 0, 600, 600, 0, 0, 0, 0],
        cards: [1, 2, 3],
      },
      {
        position: 6,
        pot: 1800,
        stacks: [0, 0, 0, 600, 600, 600, 0, 0, 0],
        cards: [1, 2, 3],
      },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 7,
        pot: 1800,
        stacks: [0, 0, 0, 600, 600, 600, 600, 0, 0],
        cards: [1, 2, 3],
      },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 8,
        pot: 1800,
        stacks: [0, 0, 0, 600, 600, 600, 600, 600, 0],
        cards: [1, 2, 3],
      },
      // {
      //
      //   position: 9,
      //   pot: 1800,
      //   stacks: [0, 0, 0, 600, 600, 600, 600, 600, 600],
      //   cards: [1, 2, 3],
      // },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 0,
        pot: 1800,
        stacks: [600, 0, 0, 600, 600, 600, 600, 600, 600],
        cards: [1, 2, 3],
      },
      {
        actions: [
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
          "跟牌",
        ],
        position: 1,
        pot: 1800,
        stacks: [600, 600, 0, 600, 600, 600, 600, 600, 600],
        cards: [1, 2, 3],
      },
      {
        actions: [
          "弃牌",
          "弃牌",
          "全下",
          "过牌",
          "看牌",
          "加注",
          "跟牌",
          "跟牌",
        ],
        position: 2,
        pot: 1800,
        stacks: [600, 600, 600, 600, 600, 600, 600, 600, 600],
        cards: [1, 2, 3],
      },
      // {
      //
      //   position: 3,
      //   pot: 7200,
      //   stacks: [0, 0, 0, 0, 0, 0, 0, 0, 0],
      //   cards: [1, 2, 3, 4],
      // },
    ],
  };
  info.titles.push(data.title);
  info.titles.push(`剩余人数/参赛人数：${data.num}/${data.total}`);
  info.titles.push(`Level：${data.level}(${data.rake})`);
  info.playIndex = 3;
  info.items = data.items;
  // 公开牌的数组必须五个
  for (let index = 0; index < 5; index++) {
    info.cards.push({
      point: "",
      img: "",
    });
  }
  // 用户的数组必须九个
  const positions = positionsMap["9"];
  for (let index = 0; index < 9; index++) {
    const item = data.users[index] || {};
    const isEmpty = !item.name;
    info.users.push({
      name: item.name || "",
      bankroll: item.bankroll || "",
    });
    info.stacks = data.items[0].stacks;
    if (isEmpty) {
      info.postions.push({
        text: "+",
        action: "",
      });
      const items = [
        {
          point: "?",
          img: "",
        },
        {
          point: "?",
          img: "",
        },
      ];
      info.userCards.push(items);
    } else {
      info.postions.push({
        text: positions[index],
        action: "",
      });
      const items = [];
      const cards = item.cards || [];
      for (let index = 0; index < 2; index++) {
        const card = cards[index];
        const { point, suit } = fromatCard(card);
        items.push({
          point: isEmpty ? "?" : point,
          img: imgMap[suit] || "",
        });
      }
      info.userCards.push(items);
    }
  }
  info.index = 0;
  handlePlay();
};
onBeforeMount(() => {
  console.log("before-mount");
  getInfo();
});

onMounted(() => {
  console.log("mounted");
});
</script>

<template>
  <section class="card-table">
    <ul class="card-table__tip tip">
      <li
        class="tip__item"
        v-for="(tip, index) of tipItems"
        :style="{ background: tip.color }"
      >
        {{ tip.text }}
      </li>
    </ul>
    <div class="card-table__con">
      <div class="notice">
        <p v-for="title of info.titles">{{ title }}</p>
      </div>
      <div class="sign">{{ info.pot }}</div>
      <div :class="info.delarClass">D</div>
      <div :class="info.winClass">WIN</div>
      <ul class="card">
        <li class="card__item" v-for="card of info.cards">
          <p v-if="card.point">
            <strong>{{ card.point }}</strong>
            <img :src="card.img" :alt="card.point" />
          </p>
          <span v-else>?</span>
        </li>
      </ul>
      <ul class="user">
        <li class="user__item" v-for="item of info.users" :style="item.style">
          <p>{{ item.name }}</p>
          <p>{{ item.bankroll }}</p>
        </li>
      </ul>
      <ul class="position">
        <li
          class="position__item"
          v-for="(postion, index) of info.postions"
          :class="{
            'is-active': index == info.position,
            'is-fold': postion.action === '弃牌',
          }"
        >
          <i></i>
          <strong :style="postion.style">{{ postion.text }}</strong>
          <span>{{ postion.action }}</span>
        </li>
      </ul>
      <ul class="stack">
        <li class="stack__item" v-for="stack of info.stacks">
          <img v-if="stack > 0" src="../assets/stack.png" alt="stack" />
          <span v-if="stack > 0">{{ stack }}</span>
        </li>
      </ul>
      <ul class="user-card">
        <li class="user-card__item" v-for="userCards of info.userCards">
          <p
            v-for="card of userCards"
            :class="{ 'is-active': !card.point, 'is-empty': card.point == '?' }"
          >
            <strong>{{ card.point }}</strong>
            <img
              v-if="card.point && card.point !== '?'"
              :src="card.img"
              :alt="card.point"
            />
            <!-- <img v-else src="../assets/back.jpg" alt="none" /> -->
          </p>
        </li>
      </ul>
    </div>
  </section>
</template>

<style lang="scss" scoped>
.card-table {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  color: #ffffff;
  background-color: #1e1e3c;

  &__tip {
    position: absolute;
    top: 0px;
    right: 0px;
  }

  &__con {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 800px;
    height: 360px;
    color: #ffffff;
    background-color: #333a6b;
    border-radius: 200px;
    border: 8px solid #ffa0a3;

    // &::before {
    //   content: "";
    //   width: 1px;
    //   height: 600px;
    //   background-color: #ffffff;
    //   position: absolute;
    //   left: 50%;
    //   top: -100px;
    // }

    // &::after {
    //   content: "";
    //   width: 1100px;
    //   height: 1px;
    //   background-color: #ffffff;
    //   position: absolute;
    //   top: 50%;
    //   left: -100px;
    // }
  }
}
@font-face {
  font-family: "HunDIN";
  src: url("../assets/fonts/HunDIN.ttf");
}
.tip {
  width: 403px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  border-left: 1px solid #c2c2c2;
  border-top: 1px solid #c2c2c2;

  &__item {
    flex: 0 0 30px;
    width: 30px;
    font-size: 11px;
    text-align: center;
    line-height: 24px;
    color: #000000;
    background-color: #ffffff;
    border-bottom: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
  }
}
.sign {
  padding: 0px 12px;
  position: absolute;
  top: 40px;
  left: 50%;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 24px;
  color: #000000;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 1px 2px 6px #0b132b;
  transform: translateX(-50%);
}
.notice {
  position: absolute;
  top: -60px;
  left: 50%;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  color: #ffffff;
  background: #109385;
  border-radius: 8px;
  box-shadow: 1px 2px 6px #0b132b;
  transform: translateX(-50%);

  p {
    padding: 0px 12px;

    &:first-child {
      padding-top: 8px;
    }
    &:last-child {
      margin-bottom: 8px;
    }
  }
}
.button {
  position: absolute;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
  width: 20px;
  height: 20px;
  color: #ffffff;
  background-color: #ff6a00;
  border-radius: 50%;
  opacity: 0;

  &0 {
    @extend .button;
    top: 18px;
    right: 138px;
    opacity: 1;
  }
  &1 {
    @extend .button;
    top: 100px;
    right: 118px;
    opacity: 1;
  }
  &2 {
    @extend .button;
    bottom: 76px;
    right: 118px;
    opacity: 1;
  }
  &3 {
    @extend .button;
    bottom: 18px;
    right: 138px;
    opacity: 1;
  }
  &4 {
    @extend .button;
    bottom: 18px;
    left: 440px;
    opacity: 1;
  }
  &5 {
    @extend .button;
    bottom: 18px;
    left: 238px;
    opacity: 1;
  }
  &6 {
    @extend .button;
    bottom: 76px;
    left: 118px;
    opacity: 1;
  }
  &7 {
    @extend .button;
    top: 100px;
    left: 118px;
    opacity: 1;
  }
  &8 {
    @extend .button;
    top: 18px;
    left: 238px;
    opacity: 1;
  }
}
.win {
  z-index: 100;
  position: absolute;
  width: 100px;
  font-size: 48px;
  text-align: center;
  font-weight: bold;
  line-height: 60px;
  color: #ffca00;
  text-shadow: 1px 1px 2px #998103;
  opacity: 0;

  &0 {
    @extend .win;
    animation-name: winFun0;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
  }
  &1 {
    @extend .win;
    animation-name: winFun1;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
  }
  &2 {
    @extend .win;
    animation-name: winFun2;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
  }
  &3 {
    @extend .win;
    animation-name: winFun3;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
  }
  &4 {
    @extend .win;
    animation-name: winFun4;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
  }
  &5 {
    @extend .win;
    animation-name: winFun5;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
  }
  &6 {
    @extend .win;
    animation-name: winFun6;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
  }
  &7 {
    @extend .win;
    animation-name: winFun7;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
  }
  &8 {
    @extend .win;
    animation-name: winFun8;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
  }
}
@keyframes winFun0 {
  0% {
    top: 80px;
    right: 350px;
    opacity: 0;
    font-size: 48px;
  }
  50% {
    top: 80px;
    right: 350px;
    opacity: 1;
    font-size: 48px;
  }
  100% {
    top: -50px;
    right: 148px;
    opacity: 1;
    font-size: 22px;
  }
}
@keyframes winFun1 {
  0% {
    top: 80px;
    right: 350px;
    opacity: 0;
    font-size: 48px;
  }
  50% {
    top: 80px;
    right: 350px;
    opacity: 1;
    font-size: 48px;
  }
  100% {
    top: 66px;
    right: -42px;
    opacity: 1;
    font-size: 22px;
  }
}

@keyframes winFun2 {
  0% {
    bottom: 220px;
    right: 350px;
    opacity: 0;
    font-size: 48px;
  }
  50% {
    bottom: 220px;
    right: 350px;
    opacity: 1;
    font-size: 48px;
  }
  100% {
    bottom: 66px;
    right: -42px;
    opacity: 1;
    font-size: 22px;
  }
}

@keyframes winFun3 {
  0% {
    bottom: 220px;
    right: 350px;
    opacity: 0;
    font-size: 48px;
  }
  50% {
    bottom: 220px;
    right: 350px;
    opacity: 1;
    font-size: 48px;
  }
  100% {
    bottom: -50px;
    right: 148px;
    opacity: 1;
    font-size: 22px;
  }
}

@keyframes winFun4 {
  0% {
    bottom: 220px;
    right: 350px;
    opacity: 0;
    font-size: 48px;
  }
  50% {
    bottom: 220px;
    right: 350px;
    opacity: 1;
    font-size: 48px;
  }
  100% {
    bottom: -50px;
    right: 350px;
    opacity: 1;
    font-size: 22px;
  }
}

@keyframes winFun5 {
  0% {
    bottom: 220px;
    left: 350px;
    opacity: 0;
    font-size: 48px;
  }
  50% {
    bottom: 220px;
    left: 350px;
    opacity: 1;
    font-size: 48px;
  }
  100% {
    bottom: -50px;
    left: 148px;
    opacity: 1;
    font-size: 22px;
  }
}

@keyframes winFun6 {
  0% {
    bottom: 220px;
    left: 350px;
    opacity: 0;
    font-size: 48px;
  }
  50% {
    bottom: 220px;
    left: 350px;
    opacity: 1;
    font-size: 48px;
  }
  100% {
    bottom: 66px;
    left: -42px;
    opacity: 1;
    font-size: 22px;
  }
}

@keyframes winFun7 {
  0% {
    top: 80px;
    left: 350px;
    opacity: 0;
    font-size: 48px;
  }
  50% {
    top: 80px;
    left: 350px;
    opacity: 1;
    font-size: 48px;
  }
  100% {
    top: 66px;
    left: -42px;
    opacity: 1;
    font-size: 22px;
  }
}

@keyframes winFun8 {
  0% {
    top: 80px;
    left: 350px;
    opacity: 0;
    font-size: 48px;
  }
  50% {
    top: 80px;
    left: 350px;
    opacity: 1;
    font-size: 48px;
  }
  100% {
    top: -50px;
    left: 148px;
    opacity: 1;
    font-size: 22px;
  }
}

.card {
  padding-left: 12px;
  display: flex;
  flex-wrap: wrap;

  &__item {
    margin-right: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 84px;
    color: #425077;
    background-color: #1e1e3c;
    box-shadow: 1px 2px 6px #0b132b;
    border-radius: 8px;
    overflow: hidden;
  }

  p {
    width: 100%;
    height: 100%;
    padding: 8px 8px 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    box-sizing: border-box;
  }

  span {
    font-family: "HunDIN";
    font-size: 28px;
    font-weight: bold;
  }

  strong {
    font-family: "HunDIN";
    font-size: 20px;
    font-family: bold;
    line-height: 1;
    align-self: flex-start;
    color: #000000;
  }

  img {
    width: 32px;
    height: 32px;
  }
}
.user {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  &__item {
    position: absolute;
    width: 100px;
    font-size: 12px;
    text-align: center;
    line-height: 18px;
    color: #ffffff;

    p:nth-child(2) {
      font-weight: 500;
    }

    &:nth-child(1) {
      top: -94px;
      right: 148px;
    }
    &:nth-child(2) {
      top: 76px;
      right: -136px;
      text-align: left;
    }
    &:nth-child(3) {
      bottom: 76px;
      right: -136px;
      text-align: left;
    }
    &:nth-child(4) {
      bottom: -94px;
      right: 148px;
    }
    &:nth-child(5) {
      bottom: -94px;
      left: 350px;
    }
    &:nth-child(6) {
      bottom: -94px;
      left: 148px;
    }
    &:nth-child(7) {
      bottom: 76px;
      left: -136px;
      text-align: right;
    }
    &:nth-child(8) {
      top: 76px;
      left: -136px;
      text-align: right;
    }
    &:nth-child(9) {
      top: -94px;
      left: 148px;
    }
  }
}
.position {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  &__item {
    position: absolute;
    width: 60px;
    height: 60px;

    span {
      position: absolute;
      top: -4px;
      left: 50%;
      padding: 0 6px;
      font-size: 12px;
      text-align: center;
      line-height: 18px;
      border-radius: 10px;
      color: #ffffff;
      background-color: #6134e4;
      transform: translateX(-50%);
    }

    i {
      position: absolute;
      top: 0;
      left: 0;
      width: 60px;
      height: 60px;
      background-color: #425077;
      border-radius: 50%;
    }

    strong {
      position: absolute;
      top: 4px;
      left: 4px;
      width: 52px;
      height: 52px;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      line-height: 52px;
      border-radius: 50%;
      background-color: #1e1e3c;
    }

    &:nth-child(1) {
      top: -50px;
      right: 168px;
    }
    &:nth-child(2) {
      top: 66px;
      right: -22px;
    }
    &:nth-child(3) {
      bottom: 66px;
      right: -22px;
    }
    &:nth-child(4) {
      bottom: -50px;
      right: 168px;
    }
    &:nth-child(5) {
      bottom: -50px;
      left: 370px;
    }
    &:nth-child(6) {
      bottom: -50px;
      left: 168px;
    }
    &:nth-child(7) {
      bottom: 66px;
      left: -22px;
    }
    &:nth-child(8) {
      top: 66px;
      left: -22px;
    }
    &:nth-child(9) {
      top: -50px;
      left: 168px;
    }
  }

  .is-active {
    i {
      background: linear-gradient(to bottom, #c9d210, #ff6a00);
      animation: borderFun 0.65s linear infinite;
    }
  }

  .is-fold {
    i {
      background-color: #7481a4 !important;
    }
    strong {
      background-color: #b3b3b3 !important;
    }
  }

  @keyframes borderFun {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
.stack {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  &__item {
    position: absolute;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      margin-right: 3px;
      width: 12px;
      height: 12px;
    }
    span {
      font-size: 12px;
      font-weight: 500;
      text-align: center;
      line-height: 18px;
      color: #ffffff;
    }

    &:nth-child(1) {
      top: 68px;
      right: 148px;
    }
    &:nth-child(2) {
      top: 124px;
      right: 28px;
    }
    &:nth-child(3) {
      bottom: 124px;
      right: 28px;
    }
    &:nth-child(4) {
      bottom: 68px;
      right: 148px;
    }
    &:nth-child(5) {
      bottom: 68px;
      left: 350px;
    }
    &:nth-child(6) {
      bottom: 68px;
      left: 148px;
    }
    &:nth-child(7) {
      bottom: 124px;
      left: 28px;
    }
    &:nth-child(8) {
      top: 124px;
      left: 28px;
    }
    &:nth-child(9) {
      top: 68px;
      left: 148px;
    }
  }
}
.user-card {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  &__item {
    padding-left: 15px;
    padding-right: 9px;
    position: absolute;
    display: flex;

    &:nth-child(1) {
      top: 18px;
      right: 148px;
    }
    &:nth-child(2) {
      top: 76px;
      right: 28px;
    }
    &:nth-child(3) {
      bottom: 76px;
      right: 28px;
    }
    &:nth-child(4) {
      bottom: 18px;
      right: 148px;
    }
    &:nth-child(5) {
      bottom: 18px;
      left: 350px;
    }
    &:nth-child(6) {
      bottom: 18px;
      left: 148px;
    }
    &:nth-child(7) {
      bottom: 76px;
      left: 28px;
    }
    &:nth-child(8) {
      top: 76px;
      left: 28px;
    }
    &:nth-child(9) {
      top: 18px;
      left: 148px;
    }
  }

  p {
    margin-right: 6px;
    padding: 3px 3px 6px 3px;
    width: 32px;
    height: 44px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: 1px 2px 6px #0b132b;
    box-sizing: border-box;
    color: #000000;
    background-color: #ffffff;

    strong {
      font-family: "HunDIN";
      font-size: 13px;
      font-family: bold;
      text-align: left;
      line-height: 1;
      align-self: flex-start;
    }

    img {
      width: 16px;
      height: 16px;
    }
  }

  .is-empty {
    justify-content: center;
    color: #425077;
    background-color: #1e1e3c;

    strong {
      align-self: center;
    }
  }
  .is-active {
    background-image: url("../assets/back.jpg");
    background-size: 100% 100%;
  }
}
</style>
